<template>
  <!-- 期刊管理 -->
  <h3 style="margin-bottom: 20px; margin-left: 20px">期刊详情管理</h3>
  <!-- 搜索栏 -->
  <nav>
    <!-- 期刊搜索栏 -->
    <div class="periodical-search">
      <el-input
        v-model="periodicalSearch"
        style="width: 240px"
        placeholder="搜索期刊名"
      /><el-button type="primary" plain style="margin-left: 10px"
        >搜索</el-button
      >
    </div>
    <!-- 出版社搜索栏 -->
    <div class="publishing-house">
      <el-input
        v-model="publishingHouseSearch"
        style="width: 240px"
        placeholder="搜索出版社名"
      /><el-button type="success" plain style="margin-left: 10px"
        >搜索</el-button
      >
    </div>
    <!-- 主编搜索栏 -->

    <div class="editor-in-chief">
      <el-input
        v-model="editorInChiefSearch"
        style="width: 240px"
        placeholder="搜索主编名"
      /><el-button type="info" plain style="margin-left: 10px">搜索</el-button>
    </div>
  </nav>
  <el-table :data="journalData" stripe style="width: 100%" fit>
    <el-table-column type="index" width="50" align="center" />
    <el-table-column prop="name" label="期刊名" align="center" />
    <el-table-column prop="competentUnit" label="主办单位" align="center" />
    <el-table-column prop="literatureQuantity" label="稿件" align="center" />
    <el-table-column prop="editorInChief" label="主编" align="center" />
    <el-table-column prop="foundingDate" label="创刊日期" align="center" />
    <el-table-column label="操作" align="center" width="360"
      ><template #default="{ row }">
        <el-button type="success" text bg @click="updateEco(row)"
          >更多信息</el-button
        >

        <el-button type="primary" text bg>修改</el-button
        ><el-button type="danger" text bg>删除</el-button></template
      ></el-table-column
    > </el-table
  ><el-pagination background layout="prev, pager, next" :total="1000" />
</template>

<script setup>
import { ref } from "vue";

// 期刊数据列表
const journalData = [
  {
    id: 1,
    name: "计算机科学",
    competentUnit: "东大信息中心",
    literatureQuantity: 1,
    publishingUnit: "电子出版社",
    editorInChief: "陈老师",
    foundingDate: "2002-09-27",
  },
  {
    id: 2,
    name: "环境工程",
    competentUnit: "东大信息中心",
    literatureQuantity: 1,
    publishingUnit: "环境出版社",
    editorInChief: "郑老师",
    foundingDate: "2002-08-04",
  },
];

// 按照期刊名搜索
const periodicalSearch = ref("");
// 按照主编名搜索
const editorInChiefSearch = ref("");
// 按照出版社名搜索
const publishingHouseSearch = ref("");
</script>

<style scoped>
#publishing {
  margin-top: 20px;
  height: 400px;
}
nav {
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-between; /* 子盒子在主轴上均匀分布 */
  align-items: center; /* 子盒子在交叉轴上居中对齐 */
  width: 100%; /* 父盒子的宽度 */
  box-sizing: border-box; /* 确保内边距包含在宽度内 */
}

.periodical-search,
.publishing-house,
.editor-in-chief,
.issuing-unit,
.readability {
  width: 30%; /* 每个子盒子的宽度 */
  height: 100px; /* 每个子盒子的高度 */

  box-sizing: border-box; /* 确保边框包含在宽度内 */
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 子盒子内容在主轴上居中对齐 */
  align-items: center; /* 子盒子内容在交叉轴上居中对齐 */
}

/* el-input表单修饰 */
::v-deep(.el-input__wrapper) {
  width: 300px;
  height: 35px;
  border: #d1d9e6 1px solid;
}
::v-deep(.el-input__wrapper.is-focus) {
  box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
}
.el-button {
  border-radius: 6px;
}
</style>
